<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件传播--Event.stopPropagation()阻止事件向外传播--</title>
    <style>
        .outer{
             width: 300px;
             height: 300px;
             background-color: aqua;
         }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #cc6600;
            margin-left: 100px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">

    </div>

</div>
<script>
    // 1.onclick  鼠标点击。
    var ele_outer=document.getElementsByClassName('outer')[0];
    var ele_inner=document.getElementsByClassName('inner')[0];
    ele_outer.onclick=function () {
        window.alert("--onclick--，I am outer")
    };
    // 2.onmousemove    鼠标被移动。
    ele_outer.onmousemove=function () {
        window.alert("--onmousemove-- ，I am outer")
    };


    ele_inner.onclick=function (e) {
        window.alert("I am  inner");
        // Event.stopPropagation()阻止事件向外传播
        e.stopPropagation()
    }

    ele_inner.onmousemove=function (e) {
        window.alert("--onmousemove-- ，I am inner");
        e.stopPropagation()
    };



</script>
</body>
</html>